<!--
 * @Author: 谢陈洁
 * @Date: 2024-11-15 21:48:25
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2024-11-20 10:28:44
 * @Description: file content
-->
<template>
  <div class="item">
    <img class="image" :src="itemData.image.url" alt="">
    <div class="location">
      <van-icon name="location" />{{ itemData.location }}
    </div>
    <div class="name">{{ itemData.houseName }}</div>
    <div class="summary">{{ itemData.summaryText }}</div>
    <div class="price">
      <span class="final">￥{{ itemData.finalPrice }}</span>
      <span class="origin">￥{{ itemData.productPrice }}</span>
      <span class="badge" :style="{
        color: itemData.priceTipBadge.color,
        backgroundImage: `linear-gradient(to right, ${itemData.priceTipBadge.gradient.startColor}, #${itemData.priceTipBadge.gradient.endColor})`
      }">{{
        itemData.priceTipBadge.text }}</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="less" scoped>
.item {
  .image {
    width: 100%;
  }

  .location,
  .summary {
    font-size: 12px;
    color: #666;
    margin: 5px 0;
  }

  .name {
    font-size: 14px;
    display: -webkit-box;
    /* 显示多行文本容器 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 显示行数 */
    text-overflow: ellipsis;
    /* 省略号代替多出部分文字 */
    overflow: hidden;
    /* 隐藏多出部分文字 */
  }

  .price {
    .final {
      font-size: 16px;
      color: var(--primary-color);
    }

    .origin {
      color: #999;
      font-size: 12px;
      text-decoration: line-through;
      margin: 0 3px;
    }

    .badge {
      font-size: 14px;
      padding: 1px 5px;
      border-radius: 10px;
    }
  }
}
</style>
